<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
  <div id="app"></div>
  <script src="./reactive.js"></script>
  <script src="./render.js"></script>
  <script src="./index.js"></script>
  <script>
    // 1.创建根组件
    const App = {
      data: reactiveObj({
        counter: 0
      }),
      render() {
        return h("div", null, [
          h("h2", null, `当前计数: ${this.data.counter}`),
          h("button", {
            onClick: () => {
              this.data.counter++
              console.log(this.data.counter);
            }
          }, "+1")
        ])
      }
    }

    // 2.挂载根组件
    const app = createApp(App);
    app.mount("#app");
  </script>
</body>
</html>